<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>兄弟户外</title>
    <!--css-->
    <link href="${ctxPath}/static/js/plugins/swiper/swiper.min.css?v=1.0.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/style.css?v=1.0.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/ubike.css?v=1.0.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/bootstrap.min.css?v=1.0.0" rel="stylesheet">
    <link href="${ctxPath}/static/css/main.css?v=1.0.0" rel="stylesheet">
    <!-- 全局js -->
    <script src="${ctxPath}/static/js/jquery.min.js?v=1.0.0"></script>
    <!-- 第三方插件 -->
    <script src="${ctxPath}/static/js/plugins/swiper/swiper.min.js?v=1.0.0"></script>
</head>
<script>
    $(document).ready(function () {
        // 栏目banner
        new Swiper('.s-c-nav', {
            slidesPerView: 1,
            loop: true,
            centeredSlides: true,
            autoplay: {
                delay: 5000,
                disableOnInteraction: false
            },
            pagination: {
                el: '.s-p-nav',
                clickable: true
            }
        });

        // 热门新闻
        new Swiper('.s-c-rem', {
            slidesPerView: 'auto',
            spaceBetween: 30,
            loop: true,
            navigation: {
                prevEl: '.s-b-p-rem',
                nextEl: '.s-b-n-rem'
            }
        });

        // 案例分享
        new Swiper('.s-c-anli', {
            effect: 'coverflow',
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: 'auto',
            loop: true,
            coverflowEffect: {
                rotate: 50,
                stretch: 0,
                depth: 100,
                modifier: 1,
                slideShadows : true
            }
        });


    });
</script>
<body>
    <!--nav-->
    <div class="swiper-container s-c-nav">
        <div class="swiper-wrapper">
            @for(banner in banners){
            <div class="swiper-slide"><img class="img_h1" src="${banner.logo}">
                @if(isNotEmpty (banner.link)){
                    <a href="${banner.link}" target="_blank"></a>
                @}
            </div>
            @}
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination s-p-nav"></div>
    </div>

    <!--热门项目推荐-->
    <div class="item-rem">
        <div class="item-title">
            热门项目推荐<br>
            Hot item recommendation
        </div>
        <hr class="hr-line-h5"/>
        <hr class="hr-line-h3"/>
        <div class="swiper-container s-c-rem">
            <div class="swiper-wrapper">
                @for(doc in RMXMTJ){
                <div class="swiper-slide"><img src="${doc.photo}"></div>
                @}
            </div>
            <!-- Add Arrows -->
            <div class="swiper-button-prev s-b-p-rem"></div>
            <div class="swiper-button-next s-b-n-rem"></div>
        </div>
    </div>

    <!--拓展新闻-->
    <div class="item-tuoz">
        <div class="item-title">
            拓展新闻<br>
            Expand the news
        </div>
        <hr class="hr-line-h5"/>
        <hr class="hr-line-h3"/>
        <div class="row row-tuoz">
            @for(doc in TZXW){
            <div class="col-md-3 col-sm-3">
                <dd>
                    <img src="${doc.photo}"><p>${doc.title}</p><a href="https://www.baidu.com"></a>

                </dd>
            </div>
            @}
        </div>
    </div>

    <!--案例分享-->
    <div class="item-anli">
        <div class="item-title">
            案例分享<br>
            Case sharing
        </div>
        <hr class="hr-line-h5"/>
        <hr class="hr-line-h3"/>
        <div class="swiper-container s-c-anli">
            <div class="swiper-wrapper">
                @for(doc in ALFX){
                <div class="swiper-slide" style="background-image: url('${doc.photo}')"><a href="https://www.baidu.com"></a></div>
                @}
            </div>
        </div>
    </div>
    <!--合作伙伴-->
    <div class="item-hezuo">
        <div class="item-title">
            合作伙伴<br>
            Cooperative partner
        </div>
        <hr class="hr-line-h5"/>
        <hr class="hr-line-h3"/>
        <div class="row row-link">
            @for(link in links) {
            <div class="col-md-2 col-sm-2"><img src="${link.logo}" alt="${link.title!}" style="max-height: 80px"></div>
            @}
        </div>
    </div>

</body>

</html>
